<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
    *{ margin:0; padding:0;}
    ul{ list-style: none;}
    img{ display: block;}
    a{ text-decoration: none; color:#555555;}
    html{ font-size:26.66667vw;}
    body{ font-size:16px;}

    header{ height:0.45rem; background:#00b38a; font-size:0.2rem; color:white; text-align: center; line-height: 0.45rem;}

    .login{ height:0.43rem; display: flex; justify-content: space-between; align-items: center; font-size:0.14rem;}
    .login p{ margin-left:0.16rem;}
    .login div{ width:0.84rem; height:0.3rem; background:#f5f5f5; margin-right:0.15rem; text-align: center; line-height: 0.3rem; border-radius: 0.15rem;}
    .login div a{ display: block; width:100%; height:100%;}

    .list{}
    .list li{ height:0.9rem; border-top:0.01rem #e8e8e8 solid; display: flex; align-items: center;}
    .list .list_img{ width:0.6rem; margin:0 0.1rem 0 0.14rem;}
    .list .list_img img{ width:100%;}
    .list .list_info{ flex:1;}
    .list .list_info h2{ font-size:0.18rem;}
    .list .list_info p:first-of-type{ font-size:0.14rem; display: flex; justify-content: space-between; margin-top: 0.04rem;}
    .list .list_info p:first-of-type span:last-of-type{ margin-right: 0.14rem; color:#17b994;}
    .list .list_info p:last-of-type{ font-size:0.12rem; color:#888888; margin-top: 0.08rem;}

    .more{ height:0.5rem; background:#fafafa; border-top: 0.01rem #e8e8e8 solid; text-align: center; line-height: 0.5rem;}
    .more a{ display: block; width:100%; height:100%;}

    footer{ height:1.15rem; text-align: center; font-size:0.12rem; line-height: 0.22rem; padding-top:0.27rem; box-sizing: border-box; margin-bottom: 0.45rem;}
    
    .tabbar{ width:100%; height:0.45rem; border-top:0.01rem #e8e8e8 solid; display: flex; position: fixed; bottom: 0; background:#f6f6f6; font-size:0.18rem; color:#c2cfcc;}
    .tabbar i{ font-size: 0.22rem; position: relative; top:0.02rem;}
    .tabbar div{ flex:1; text-align: center; line-height: 0.45rem;}
    .tabbar .active{ background:#e7f3f0; color:#00b38a;}
    </style>
</head>
<body>
    <header>拉勾网</header>
    <section class="login">
        <p>10秒钟定制职位</p>
        <div><a href="#">去登陆</a></div>
    </section>
    <ul class="list">
        <li>
            <div class="list_img">
                <a href="#"><img src="./lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大爱特</a></h2>
                <p>
                    <span>中级java开发工程师</span>
                    <span>13k-20k</span>
                </p>
                <p>今天 11:16</p>
            </div>
        </li>
        <li>
            <div class="list_img">
                <a href="#"><img src="./lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大爱特</a></h2>
                <p>
                    <span>中级java开发工程师</span>
                    <span>13k-20k</span>
                </p>
                <p>今天 11:16</p>
            </div>
        </li>
        <li>
            <div class="list_img">
                <a href="#"><img src="./lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大爱特</a></h2>
                <p>
                    <span>中级java开发工程师</span>
                    <span>13k-20k</span>
                </p>
                <p>今天 11:16</p>
            </div>
        </li>
        <li>
            <div class="list_img">
                <a href="#"><img src="./lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大爱特</a></h2>
                <p>
                    <span>中级java开发工程师</span>
                    <span>13k-20k</span>
                </p>
                <p>今天 11:16</p>
            </div>
        </li>
        <li>
            <div class="list_img">
                <a href="#"><img src="./lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大爱特</a></h2>
                <p>
                    <span>中级java开发工程师</span>
                    <span>13k-20k</span>
                </p>
                <p>今天 11:16</p>
            </div>
        </li>
        <li>
            <div class="list_img">
                <a href="#"><img src="./lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大爱特</a></h2>
                <p>
                    <span>中级java开发工程师</span>
                    <span>13k-20k</span>
                </p>
                <p>今天 11:16</p>
            </div>
        </li>
        <li>
            <div class="list_img">
                <a href="#"><img src="./lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大爱特</a></h2>
                <p>
                    <span>中级java开发工程师</span>
                    <span>13k-20k</span>
                </p>
                <p>今天 11:16</p>
            </div>
        </li>
    </ul>
    <section class="more"><a href="#">加载更多</a></section>
    <footer>
        <p>@2015 lagou.com,all right reserved</p>
        <p>
            <a href="#">移动版</a> · <a href="#">移动版</a> · <a href="#">移动版</a>
        </p>
    </footer>
    <section class="tabbar">
        <div class="active"><i class="iconfont icon-home"></i> 职位</div>
        <div><i class="iconfont icon-sousuo-"></i> 搜索</div>
        <div><i class="iconfont icon-wode"></i> 我的</div>
    </section>
</body>
</html>